<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>猪猪的小天地</title>
    <link href="/logo.ico" rel="icon">
    <link rel="stylesheet" href="2007.css">
    <link rel="stylesheet" href="2007kuan.css">
</head>

<body>
    <div id="center">
        <h1 id="HelloTitil">猪猪的小天地</h1>
        <div id="centerBackground"></div>
        <div id="poemBox">
            <div id="poem">
                <p id="poemtext">如果说</br>青春如烟，仅此一场，放肆冲动</br>我会将</br>什么故事，写在过去，散在风中？</br>即便此刻两手空空</br>即便隐隐作痛</br>要记得时而抬起头仰望星空</br>拥抱彩虹。</p>-
                <br style="clear: both;">
            </div>
        </div>
    </div>
    
    <div id="mainLinkBox">
        <div id="linkLine">
            <a href="/blogs/">
                <div class="linkGroup">
                    <h2 class="linkTitle">博客<b class="demo-icon">&#xe801;</b></h2>
                    <p class="linkContent">猪猪的日常和作品动态</p>
                    <div class="linkGrouphover"></div>
                </div>
            </a>
            <a href="/docs/">
                <div class="linkGroup">
                    <h2 class="linkTitle">帮助文档<b class="demo-icon">&#xe802;</b></h2>
                    <p class="linkContent">猪猪大部分作品的帮助文档，使用须知或注意事项</p>
                    <div class="linkGrouphover"></div>
                </div>
            </a>
            <br style="clear: both;">
        </div>
        <div id="linkLine">
            <a href="/words/">
                <div class="linkGroup">
                    <h2 class="linkTitle">一言<b class="demo-icon">&#xe803;</b></h2>
                    <p class="linkContent">心灵鸡汤(也有可能是毒鸡汤)</p>
                    <div class="linkGrouphover"></div>
                </div>
            </a>
            <a href="/contactInformation/">
                <div class="linkGroup">
                    <h2 class="linkTitle">联系方式<b class="demo-icon">&#xf2b9;</b></h2>
                    <p class="linkContent">如何与猪猪取得联系</p>
                    <div class="linkGrouphover"></div>
                </div>
            </a>
            <br style="clear: both;">
        </div>
        <div id="linkLine">
            <a href="https://gitee.com/kuankuan2007">
                <div class="linkGroup">
                    <h2 class="linkTitle">Gitee<b class="demo-icon">&#xf053;</b></h2>
                    <p class="linkContent">猪猪的Gitee地址</p>
                    <div class="linkGrouphover"></div>
                </div>
            </a>
            <a href="https://github.com/kuankuan2007">
                <div class="linkGroup">
                    <h2 class="linkTitle">Github<b class="demo-icon">&#xf056;</b></h2>
                    <p class="linkContent">宽宽的GitHub地址</p>
                    <div class="linkGrouphover"></div>
                </div>
            </a>
            <br style="clear: both;">
        </div>
        <div id="linkLine">
            <a href="https://forms.office.com/r/2nPmzhjEur">
                <div class="linkGroup">
                    <h2 class="linkTitle">家庭关系调研<b class="demo-icon">&#xe806;</b></h2>
                    <p class="linkContent">一个以青少年为主的，旨在调查青少年家庭情况和问题的问卷</p>
                    <div class="linkGrouphover"></div>
                </div>
            </a>
            <a href="https://forms.office.com/Pages/AnalysisPage.aspx?AnalyzerToken=rbx2xfRFl4LGlqva50g3VT2NtuuAJAcH&id=Icax11YyKkiCYjbVI3XYNvcgsu5jac5KjH8AKanDr0xUOURFWlBLWjE0V1ZFSkdIT1owT0I4WTBLSy4u">
                <div class="linkGroup">
                    <h2 class="linkTitle">上次调查结果<b class="demo-icon">&#xe807;</b></h2>
                    <p class="linkContent">疫情期间精神状态调研结果公布</p>
                    <div class="linkGrouphover"></div>
                </div>
            </a>
            <br style="clear: both;">
        </div>
    </div>
    
    <div id="waves">
        <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 590" xmlns="http://www.w3.org/2000/svg"
            class="transition duration-300 ease-in-out delay-150">
            <style>
            </style>
            <defs>
                <linearGradient id="gradient" x1="17%" y1="88%" x2="83%" y2="12%">
                    <stop offset="5%" stop-color="#9c9cff"></stop>
                    <stop offset="95%" stop-color="#bbbbff"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,600 C 0,600 0,150 0,150 C 119.82775119617222,142.60287081339715 239.65550239234443,135.20574162679426 317,130 C 394.34449760765557,124.79425837320574 429.2057416267943,121.77990430622009 529,115 C 628.7942583732057,108.22009569377991 793.5215311004786,97.67464114832538 909,109 C 1024.4784688995214,120.32535885167462 1090.7081339712918,153.52153110047846 1171,164 C 1251.2918660287082,174.47846889952154 1345.6459330143541,162.23923444976077 1440,150 C 1440,150 1440,600 1440,600 Z"
                stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.4"
                class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
            <style>
                .path-1 {
                    animation: pathAnim-1 4s;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                }

                @keyframes pathAnim-1 {
                    0% {
                        d: path("M 0,600 C 0,600 0,300 0,300 C 64.5263157894737,329.2535885167464 129.0526315789474,358.50717703349284 237,343 C 344.9473684210526,327.49282296650716 496.3157894736843,267.2248803827751 610,259 C 723.6842105263157,250.7751196172249 799.6842105263157,294.5933014354068 881,321 C 962.3157894736843,347.4066985645932 1048.9473684210525,356.40191387559804 1143,350 C 1237.0526315789475,343.59808612440196 1338.5263157894738,321.799043062201 1440,300 C 1440,300 1440,600 1440,600 Z");
                    }

                    25% {
                        d: path("M 0,600 C 0,600 0,300 0,300 C 105.8468899521531,295.56937799043067 211.6937799043062,291.1387559808613 301,280 C 390.3062200956938,268.8612440191387 463.07177033492826,251.01435406698562 553,247 C 642.9282296650717,242.98564593301438 750.0191387559809,252.8038277511962 865,259 C 979.9808612440191,265.1961722488038 1102.8516746411483,267.77033492822966 1200,274 C 1297.1483253588517,280.22966507177034 1368.5741626794259,290.11483253588517 1440,300 C 1440,300 1440,600 1440,600 Z");
                    }

                    50% {
                        d: path("M 0,600 C 0,600 0,300 0,300 C 96.71770334928229,292.8612440191388 193.43540669856458,285.7224880382775 279,286 C 364.5645933014354,286.2775119617225 438.97607655502395,293.97129186602876 546,300 C 653.023923444976,306.02870813397124 792.6602870813397,310.39234449760767 883,298 C 973.3397129186603,285.60765550239233 1014.3827751196172,256.4593301435407 1099,254 C 1183.6172248803828,251.54066985645932 1311.8086124401914,275.77033492822966 1440,300 C 1440,300 1440,600 1440,600 Z");
                    }

                    75% {
                        d: path("M 0,600 C 0,600 0,300 0,300 C 79.05263157894737,296.7177033492823 158.10526315789474,293.43540669856463 264,308 C 369.89473684210526,322.56459330143537 502.63157894736844,354.9760765550239 601,340 C 699.3684210526316,325.0239234449761 763.3684210526317,262.6602870813397 849,257 C 934.6315789473683,251.3397129186603 1041.8947368421052,302.38277511961724 1144,319 C 1246.1052631578948,335.61722488038276 1343.0526315789475,317.8086124401914 1440,300 C 1440,300 1440,600 1440,600 Z");
                    }

                    100% {
                        d: path("M 0,600 C 0,600 0,300 0,300 C 64.5263157894737,329.2535885167464 129.0526315789474,358.50717703349284 237,343 C 344.9473684210526,327.49282296650716 496.3157894736843,267.2248803827751 610,259 C 723.6842105263157,250.7751196172249 799.6842105263157,294.5933014354068 881,321 C 962.3157894736843,347.4066985645932 1048.9473684210525,356.40191387559804 1143,350 C 1237.0526315789475,343.59808612440196 1338.5263157894738,321.799043062201 1440,300 C 1440,300 1440,600 1440,600 Z");
                    }
                }
            </style>
            <defs>
                <linearGradient id="gradient" x1="17%" y1="88%" x2="83%" y2="12%">
                    <stop offset="5%" stop-color="#9c9cff"></stop>
                    <stop offset="95%" stop-color="#bbbbff"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,600 C 0,600 0,300 0,300 C 64.5263157894737,329.2535885167464 129.0526315789474,358.50717703349284 237,343 C 344.9473684210526,327.49282296650716 496.3157894736843,267.2248803827751 610,259 C 723.6842105263157,250.7751196172249 799.6842105263157,294.5933014354068 881,321 C 962.3157894736843,347.4066985645932 1048.9473684210525,356.40191387559804 1143,350 C 1237.0526315789475,343.59808612440196 1338.5263157894738,321.799043062201 1440,300 C 1440,300 1440,600 1440,600 Z"
                stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="0.53"
                class="transition-all duration-300 ease-in-out delay-150 path-1"></path>
            <style>
                .path-2 {
                    animation: pathAnim-2 4s;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                }

                @keyframes pathAnim-2 {
                    0% {
                        d: path("M 0,600 C 0,600 0,450 0,450 C 109.38755980861242,441.8468899521531 218.77511961722485,433.6937799043062 311,424 C 403.22488038277515,414.3062200956938 478.2870813397129,403.07177033492826 556,396 C 633.7129186602871,388.92822966507174 714.0765550239234,386.0191387559809 825,406 C 935.9234449760766,425.9808612440191 1077.4066985645934,468.8516746411483 1185,480 C 1292.5933014354066,491.1483253588517 1366.2966507177034,470.57416267942585 1440,450 C 1440,450 1440,600 1440,600 Z");
                    }

                    25% {
                        d: path("M 0,600 C 0,600 0,450 0,450 C 96.61244019138758,448.9569377990431 193.22488038277515,447.9138755980861 290,458 C 386.77511961722485,468.0861244019139 483.7129186602871,489.30143540669854 564,491 C 644.2870813397129,492.69856459330146 707.9234449760767,474.8803827751197 810,453 C 912.0765550239233,431.1196172248803 1052.5933014354068,405.17703349282294 1164,404 C 1275.4066985645932,402.82296650717706 1357.7033492822966,426.41148325358853 1440,450 C 1440,450 1440,600 1440,600 Z");
                    }

                    50% {
                        d: path("M 0,600 C 0,600 0,450 0,450 C 124.07655502392345,434.1244019138756 248.1531100478469,418.2488038277512 340,405 C 431.8468899521531,391.7511961722488 491.46411483253587,381.1291866028708 572,409 C 652.5358851674641,436.8708133971292 753.9904306220095,503.23444976076564 849,504 C 944.0095693779905,504.76555023923436 1032.5741626794259,439.933014354067 1130,420 C 1227.4258373205741,400.066985645933 1333.712918660287,425.03349282296654 1440,450 C 1440,450 1440,600 1440,600 Z");
                    }

                    75% {
                        d: path("M 0,600 C 0,600 0,450 0,450 C 102.57416267942583,486.2392344497608 205.14832535885165,522.4784688995215 298,500 C 390.85167464114835,477.52153110047846 473.98086124401914,396.32535885167465 566,395 C 658.0191387559809,393.67464114832535 758.9282296650719,472.22009569377985 859,498 C 959.0717703349281,523.7799043062201 1058.3062200956938,496.79425837320576 1155,480 C 1251.6937799043062,463.20574162679424 1345.846889952153,456.6028708133971 1440,450 C 1440,450 1440,600 1440,600 Z");
                    }

                    100% {
                        d: path("M 0,600 C 0,600 0,450 0,450 C 109.38755980861242,441.8468899521531 218.77511961722485,433.6937799043062 311,424 C 403.22488038277515,414.3062200956938 478.2870813397129,403.07177033492826 556,396 C 633.7129186602871,388.92822966507174 714.0765550239234,386.0191387559809 825,406 C 935.9234449760766,425.9808612440191 1077.4066985645934,468.8516746411483 1185,480 C 1292.5933014354066,491.1483253588517 1366.2966507177034,470.57416267942585 1440,450 C 1440,450 1440,600 1440,600 Z");
                    }
                }
            </style>
            <defs>
                <linearGradient id="gradient" x1="17%" y1="88%" x2="83%" y2="12%">
                    <stop offset="5%" stop-color="#9c9cff"></stop>
                    <stop offset="95%" stop-color="#bbbbff"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,600 C 0,600 0,450 0,450 C 109.38755980861242,441.8468899521531 218.77511961722485,433.6937799043062 311,424 C 403.22488038277515,414.3062200956938 478.2870813397129,403.07177033492826 556,396 C 633.7129186602871,388.92822966507174 714.0765550239234,386.0191387559809 825,406 C 935.9234449760766,425.9808612440191 1077.4066985645934,468.8516746411483 1185,480 C 1292.5933014354066,491.1483253588517 1366.2966507177034,470.57416267942585 1440,450 C 1440,450 1440,600 1440,600 Z"
                stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"
                class="transition-all duration-300 ease-in-out delay-150 path-2"></path>
        </svg>
    </div>
</body>